<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'
import utils from '../utils/utils'
import { useDialogStore } from '../store/dialog'
import { useImgStore } from '../store/img'
const imgStore = useImgStore()
const dialogStore = useDialogStore()
const imgUrl = computed(() => imgStore.imgUrl)
const rawFile = ref<File | null>(null) // 存储原始文件对象

watch(
    () => imgStore.imgVisable=true,
    () => {
        imgStore.imgUrl = dialogStore.contain.img || ''
    }
)
// 文件选择处理
const handleFileChange = async (file: UploadFile) => {
    try {
        if (!file?.raw) {
            utils.showMessage('文件读取失败', 'error', 2000)
            return false
        }
        if (file.raw) {
            // 清理之前的Blob URL
            if (imgStore.imgUrl.startsWith('blob:')) {
                URL.revokeObjectURL(imgStore.imgUrl)
            }
            rawFile.value = file.raw
            imgStore.setImgRow(rawFile.value!)
            //imgStore.imgUrl = URL.createObjectURL(file.raw) // 本地预览
            // 生成新 URL
            const newUrl = URL.createObjectURL(file.raw)
            imgStore.setImgUrl(newUrl) // 使用 action 方法更新
            // 添加加载验证
            const img = new Image()
            img.onload = () => console.log('图片加载完成')
            img.onerror = (e) => console.error('图片加载失败', e)
            img.src = newUrl
            console.log(URL.createObjectURL(file.raw))
            console.log(imgStore.imgUrl)
            imgStore.setImgVisable(true)
        }
        return false // 阻止自动上传
    } catch (error) {
        console.log('错误')
        console.error(error)
    }
}
const handleImageLoad = () => {
    console.log('DOM图片加载成功')
}

const handleImageError = (e) => {
    console.error('DOM图片加载失败', e)
    if (imgStore.imgUrl.startsWith('blob:')) {
        URL.revokeObjectURL(imgStore.imgUrl)
        imgStore.setImgUrl('')
    }
}

onMounted(() => {
    imgStore.imgUrl = dialogStore.contain.img || ''
    console.log(imgStore.imgUrl)
})

// 在 uploadImg 组件中添加
onBeforeUnmount(() => {
    if (imgStore.imgUrl.startsWith('blob:')) {
        URL.revokeObjectURL(imgStore.imgUrl)
    }
})
</script>
<template>
    <el-upload class="avatar-uploader" :show-file-list="false" :on-change="handleFileChange"
        :before-upload="() => false">
        <div class="avatar-container">
            <img v-if="imgUrl" :src="imgUrl" class="avatar" @load="handleImageLoad" @error="handleImageError" />
            <div class="hover-mask">
                <el-icon class="upload-icon">
                    <Plus />
                </el-icon>
            </div>
        </div>
        <el-icon v-if="!imgStore.imgUrl" class="avatar-uploader-icon">
            <Plus />
        </el-icon>
    </el-upload>
</template>


<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
    border-radius: 6px;
}

.avatar-container {
    position: relative;
    display: inline-block;
}

.hover-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-container:hover .hover-mask {
    opacity: 1;
}

.upload-icon {
    color: white;
    font-size: 28px;
    z-index: 2;
}

/* 保持原有样式 */
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar {
    border: 2px solid #00ff00 !important;
    /* 绿色边框验证元素可见性 */
    background-color: rgba(255, 0, 0, 0.1) !important;
    /* 红色背景验证容器可见性 */
    position: relative;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>